<template>
     <Form ref="formValidate" :model="role" :rules="ruleValidate" :label-width="80">
        <FormItem label="角色名称" prop="roleName">
            <Input v-model="role.roleName" placeholder="请输入角色名称"></Input>
        </FormItem>
        <FormItem label="顺序" prop="roleSort">

            <InputNumber placeholder="排序号" v-model="role.roleSort"></InputNumber>
        </FormItem>

        <FormItem label="描述" prop="roleDesc">
            <Input v-model="role.roleDesc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述..."></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <Button type="default" @click="handleReset('formValidate')" style="margin-left: 8px"> 重置 </Button>
        </FormItem>
    </Form>
</template>
<script>
import { update } from '../../api/role.js'
export default {
  props: ['role'],
  data () {
    return {

      ruleValidate: {
        roleName: [
          { required: true, type: 'string', message: '必填', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, type: 'string', message: '必填', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          update(this.role).then((result) => {
            if (result.data.success) {
              this.$Message.success(result.data.msg)
            } else {
              this.$Message.error(result.data.error)
            }
            this.$emit('close')
          })
        } else {
          this.$Message.error('验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }

}
</script>
